<!--计时器功能，若要使用，需要更改druid.properties的数据库配置-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta content="width=device-width, initial-scale=1.0" name="viewport">-->
<!--    <title>背单词</title>-->
<!--    <script src="http://code.jquery.com/jquery-latest.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<script>-->
<!--    /*代码有一个常见的问题，即异步请求会在页面加载之后执行，而你的变量赋值和 DOM 元素内容更新的代码在请求之前执行，-->
<!--    这样会导致 count 和 allTime 的值在赋值之前被访问，因此它们的值为 undefined。*/-->
<!--    var count;-->
<!--    var allTime;-->
<!--    $(document).ready(function () {-->
<!--        $.ajax({-->
<!--            url: "GetMessageServlet",-->
<!--            type: "GET",-->
<!--            data: {userId: 1},//模拟是用户1-->
<!--            success: function (response) {-->
<!--                // 请求成功时的处理-->
<!--                console.log(response)-->
<!--                count = response.data.count;-->
<!--                allTime = response.data.allTime;-->
<!--                // 获取要显示变量的 DOM 元素-->
<!--                var displayElement1 = document.getElementById("display1");-->
<!--                var displayElement2 = document.getElementById("display2");-->
<!--                console.log(count)-->
<!--                console.log(allTime)-->
<!--                // 将变量的值设置为该元素的文本内容-->
<!--                displayElement1.innerText = "本月背了单词:" + count;-->
<!--                displayElement2.innerText = "本月背单词时长:" + (allTime / 1000) + "秒";-->
<!--            },-->
<!--            error: function (xhr, status, error) {-->
<!--                // 请求失败时的处理-->
<!--                console.error("请求失败：" + status + ", " + error);-->
<!--            }-->
<!--        });-->

<!--    })-->

<!--</script>-->

<!--<p id="timer">00:00</p>-->
<!--<button id="startButton">开始背单词</button>-->
<!--<button id="endButton">结束背单词</button>-->

<!--<div id="display1"></div>-->
<!--<br>-->
<!--<div id="display2"></div>-->

<!--<script>-->
<!--    let startTime;-->
<!--    let timerInterval;-->
<!--    document.getElementById('startButton').addEventListener('click', function () {-->
<!--        startTime = new Date(); // 记录开始时间-->
<!--        timerInterval = setInterval(updateTimer, 1000); // 每秒更新计时器-->
<!--    });-->

<!--    document.getElementById('endButton').addEventListener('click', function () {-->
<!--        clearInterval(timerInterval); // 停止计时器-->
<!--        let endTime = new Date(); // 记录结束时间-->
<!--        let duration = (endTime - startTime) / 1000; // 计算持续时间，单位为秒-->
<!--        // 显示时间-->
<!--        console.log('endTime' + endTime)-->
<!--        console.log('duration' + duration)-->
<!--        console.log((endTime - startTime))-->
<!--        // 发送ajax请求-->
<!--        recordTime((endTime - startTime), 1);-->

<!--        alert(`本次背单词用时：${formatTime(duration)}`);-->

<!--        // 刷新页面-->
<!--        window.location.reload();-->

<!--    });-->

<!--    function updateTimer() {-->
<!--        let currentTime = new Date();-->
<!--        let elapsed = (currentTime - startTime) / 1000; // 计算已经过去的时间，单位为秒-->
<!--        document.getElementById('timer').textContent = formatTime(elapsed);-->
<!--    }-->

<!--    function formatTime(seconds) {-->
<!--        let minutes = Math.floor(seconds / 60);-->
<!--        let remainingSeconds = Math.floor(seconds % 60);-->
<!--        return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;-->
<!--    }-->

<!--    function recordTime(timeSpent, userId) {-->
<!--        let data = {-->
<!--            time: timeSpent,-->
<!--            userId: userId-->
<!--        }-->
<!--        $.ajax({-->
<!--            url: "RecordServlet",-->
<!--            type: "GET",-->
<!--            dataType: "json",-->
<!--            data: data,-->
<!--            success: function (response) {-->
<!--                // 请求成功时的处理-->
<!--                console.log(response)-->
<!--                console.log(JSON.stringify(response))-->
<!--            },-->
<!--            error: function (xhr, status, error) {-->
<!--                // 请求失败时的处理-->
<!--                console.error("请求失败：" + status + ", " + error);-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
